<template>
	<view class="main">
		<view class="main-head">
			<view class="main-head-info" v-if="!isLogin()">
				<button class="avatar"  @click="login()" >
				<u-avatar :src="avatarUrl"></u-avatar>
				</button>
				<view class="nickname">
					<text>请登录</text>
				</view>
				
			</view>
			<view class="main-head-info" v-if="isLogin()">
				<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" >
				<u-avatar class="avatar-img" size="76" :src="baseUrl+vuex_user.avatar"></u-avatar>
				</button>
				<input class="nickname" type="nickname" @blur="bindblur" :value="vuex_user.nickname"  placeholder="请输入昵称" />
			</view>
		</view>
		<view>
			
		</view>
		<!-- <u-button @click="login">登录</u-button> -->
		<!-- <input class="nickname" type="nickname" :value="nickname"  placeholder="请输入昵称" /> -->
		<button @click="tab">山卡拉结算单</button>
		<!-- <u-button @click="login">登录</u-button> -->
	</view>
	

</template>

<script>
import config from "../../common/config.js"
export default {
	data() {
		return {
			fileList1: [],
			baseUrl: config.domain,
			nickname:'',
			avatarUrl:'../../static/avatar.png'
		}
	},
	methods: {
		modifyVuex() {
			this.$u.vuex('vuex_version', '1.0.2');
			// 修改对象的形式，中间用"."分隔
			this.$u.vuex('vuex_user.name', '诗圣2');
		},
		login() {
			var that = this;
			uni.login({
				provider: 'weixin', //使用微信登录
				success: function (res) {
					// console.log(res);
					uni.request({
						url: that.baseUrl + "/wx/getOpenid",
						data: {
							jscode: res.code
						},
						success: function (res) {
							that.$u.vuex('vuex_user', res.data);
							console.log(that.vuex_user)
						},
					})
				}
			});
		},
		onChooseAvatar(e) {
			var that = this;
			console.log(e);
			const tempFilePath = e.detail.avatarUrl //上传的图片地址
			const maxSizeInBytes = 1024 * 1024 // 限制大小为1MB
			console.log(tempFilePath);
			uni.getFileInfo({
				filePath: tempFilePath,
				success: res => {
					const fileSize = res.size
					if (fileSize > maxSizeInBytes) {
						//如果上传的图片大小超过1MB，进行提示
						uni.$showMsg('请上传小于1MB的图片')
						return
					}
					//图片大小符合，替换图片
					let avatarUrl={};
					avatarUrl.value = tempFilePath
					//将更改的图片上传到服务器
					uni.uploadFile({
						url: that.baseUrl+'/wx/getAvatar',   //后端接口url
						filePath: avatarUrl.value,
						name: 'file',
						formData:{
							user_id:that.vuex_user.id
						},
						// header: {
						// 	Authorization: 'Bearer ' + token  // 将 token 添加到请求的 header 中
						// },
						success(res) {
							let fileRes = JSON.parse(res.data)
							// uni.$showMsg(fileRes.message)
							// console.log(res);
							that.vuex_user.avatar=fileRes.msg
						}
					})
				}
			})
		},
		tab(){
			// this.vuex_user.avatar='/upload/avatar/2023-09-20/v5cckd.jpeg';
			// this.$u.vuex('vuex_user.nickname','eee')
			console.log(this.vuex_user)
		},
		bindblur(e){
			let that=this;
			console.log(e);
			uni.request({
				url:that.baseUrl+'/wx/changeNickname',
				data:{
					user_id:that.vuex_user.id,
					nickname:e.detail.value
				},
				success(res) {
					if(res.data.code==200){
						that.$u.vuex('vuex_user.nickname',e.detail.value)
					}
				}
			})
		},
		isLogin(){
			//是否登录
			if (this.vuex_user.id){
				return true;
			}
			else{
				return false;
			}
		},
	}

}
</script>
<style lang="scss" scoped>
	.main{
		&-head{
			width: 100vw;
			height: 330rpx;
			// background-color: #17abe3;
			background-image: linear-gradient(to right top, #17abe3, #00c4e5, #00d9c0, #00e77c, #a8eb12);
			&-info{
				padding-top: 50rpx;
			}
			.avatar {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				// border: 2rpx solid white;
				box-shadow: 0 1rpx 5rpx black;
				padding: 0;
				.avatar-img {
					width: 100%;
					height: 100%;
				}
			}
			.nickname {
				color: white;
				margin-top: 20rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}
</style>